<template>
    <div class="tags" v-if="tagsList.length">
        <ul>
            <li v-for="item in tagsList" :class="['tags-li', {'active': isActive(item.path)}]" :key="item.menuId">
                <router-link :to="item.path" class="tags-li-title">
                    {{item.title}}
                </router-link>
                <span class="tags-li-icon" @click="setTabs(item, $route.fullPath)"><i class="el-icon-close"></i></span>
            </li>
        </ul>
        <div class="tags-close-box">
            <el-dropdown @command="handleTags">
                <el-button size="mini" type="primary">
                    标签选项<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu size="small" slot="dropdown">
                    <el-dropdown-item command="other">关闭其他</el-dropdown-item>
                    <el-dropdown-item command="all">关闭所有</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
export default {
    name:'omTags',
    props:{
        tagsList:{
            type:Array,
            default:() => ([])
        },
        setTabs:{
            type:Function,
            default:() => {}
        },
        closeAll:{
            type:Function,
            default:() => {}
        },
        closeOther:{
            type:Function,
            default:() => {}
        }
    },
    methods: {
        isActive(path) {
            const boolean = path === this.$route.fullPath
            return boolean
        },
        handleTags(command) {
            command === 'other' ? this.closeOther(this.$route.fullPath) : this.closeAll()
        }
    }
}

</script>

<style lang="scss">
@import '@/config.scss';
.tags {
    /* overflow: hidden; */
    position: relative;
    height: 30px;
    background: #fff;
    padding-right: 120px;
    box-shadow: 0 5px 10px #ddd;
}

.tags ul {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.tags-li {
    float: left;
    margin: 3px 5px 2px 3px;
    border-radius: 3px;
    font-size: 12px;
    overflow: hidden;
    cursor: pointer;
    height: 23px;
    line-height: 23px;
    border: 1px solid #e9eaec;
    background: #fff;
    padding: 0 5px 0 12px;
    vertical-align: middle;
    color: #666;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

.tags-li:not(.active):hover {
    background: #f8f8f8;
}

.tags-li.active {
    color: #fff;
    /* background:#409EFF; */
    background:#00D1B2;
}

.tags-li-title {
    float: left;
    max-width: 80px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 5px;
    color: #666;
}

.tags-li.active .tags-li-title {
    color: #fff;
}

.tags-close-box {
    position: absolute;
    right: 0;
    top: 0;
    box-sizing: border-box;
    padding-top: 1px;
    text-align: center;
    width: 110px;
    height: 30px;
    background: #fff;
    box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1);
    z-index: 10;
}

// .el-popper[x-placement^=bottom] .popper__arrow::after {
//     border-bottom-color: $initMenuBackground;
// }
.el-dropdown-menu{
    background: $initMenuBackground;
}
.el-dropdown-menu__item{
    color:$initMenuColor;
}
</style>
